<template>
  <div class="fanyi_wrapper">
    <div class="fanyi_inner" style="padding: 30px;">

      <div class="fanyi_search_wrapper" style="">
        <div class="fanyi_search_inner" style="display: flex;">
          <el-input style="margin-right: 30px;"
            placeholder="请输入要翻译内容"
            v-model="fanyi_input"
            clearable>
          </el-input>
          <el-button type="primary" style="width: 250px;" icon="el-icon-search" @click="fanyi">搜索</el-button>
        </div>
        <div class="fanyi_main_wrapper">
          <div class="fanyi_main_inner" v-show="show_fanyi_result">
            <div class="src_wrapper" >
              <div class="src_inner src_tgt" style="">
                {{src}}
              </div>
            </div>
            <div class="tgt_wrapper " >
              <div class="tgt_inner src_tgt" style="">
                {{tgt}}
              </div>
            </div>
            <el-button @click="addWord" type="primary" style="width: 100%;border-radius: 8px;margin-top: 20px;font-size: 20px;" icon="" >
              添加单词
            </el-button>
          </div>
        </div>

        <AddWordDialog :word="word" :dialog-form-visible="dialogFormVisible" v-on:showDialog="showDialog"></AddWordDialog>
      </div>
    </div>
  </div>
</template>

<script>
  import {postRequest} from "../utils/api";
  import AddWordDialog from "./AddWordDialog";

  export default {
      name: "Fanyi",
      data(){
        return {
          fanyi_input: '',
          src: 'src',
          tgt: '翻译',
          show_fanyi_result: false,
          dialogFormVisible: false,
          word: {
            src: 'src',
            tgt: 'tgt',
            features: [],
            imp: '保留',
            cmd: '保留'
          },
        }
      },
      methods: {
        fanyi(){
          if (this.fanyi_input == ''){
            return
          }
          let  param = {src: this.fanyi_input}
          postRequest("/word_consumer/fanyi", param).then(res=>{
            this.src = this.fanyi_input
            this.tgt = res.data.t
            this.word.src = this.src
            this.word.tgt = this.tgt
            this.$message({showClose: true, message: '翻译成功', type: 'success'})
          }).catch(err=>{
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'});
          })
          this.show_fanyi_result = true
        },
        addWord(){
          this.dialogFormVisible = true
        },
        showDialog(value){
          console.debug("enter showDialog(lisenter)  value="+value)
          this.dialogFormVisible = value
        }
      },
      components: {AddWordDialog}
    }
</script>

<style scoped>
.src_tgt{
  border-radius: 10px;background-color: white;height: 180px;margin-top: 20px;line-height: 180px;
  font-size: 60px;font-weight: bold;
}
</style>
